<template>
  <div class="basic">
    <div class="submmit">
      <el-button type="primary" style="float:right;" @click="createData()">提交</el-button>
    </div>
    <div class="main">
      <el-form ref="dataForm" :model="SiteSet" label-position="right" label-width="180px">
        <el-form-item label="网站名称">
          <el-input v-model="SiteSet.name"/>
        </el-form-item>
        <el-form-item label="网站副标题">
          <el-input v-model="SiteSet.title"/>
        </el-form-item>
        <el-form-item label="网站域名">
          <el-input v-model="SiteSet.domainName"/>
        </el-form-item>
        <el-form-item label="网站IP访问地址">
          <el-input v-model="SiteSet.ip"/>
        </el-form-item>
        <el-form-item label="网站LOGO">
          <img v-if="SiteSet.logoUrl" :src="SiteSet.logoUrl" alt class="img" style="width:424px;height:auto;">
          <el-upload
            :on-change="handleLogoChange"
            :http-request="uploadLogoFile"
            :limit="1"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
          >
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议图片尺寸为250*50，且不超过500kb</div>
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="浏览器图标">
          <img v-if="SiteSet.iconUrl" :src="SiteSet.iconUrl" alt class="img" style="width:180px;height:auto;">
          <el-upload
            :on-change="handleIconChange"
            :http-request="uploadIconFile"
            :limit="1"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
          >
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议图片尺寸为250*50，且不超过500kb</div>
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          </el-upload>
          <!--<el-dialog :visible.sync="dialogVisible2">-->
          <!--<img :src="dialogImageUrl" width="100%" alt>-->
          <!--</el-dialog>-->
        </el-form-item>
        <el-form-item label="SEO关键词">
          <el-input v-model="SiteSet.seoKeyWords"/>
          <p>设置多个关键词请用半角逗号","隔开。</p>
        </el-form-item>
        <el-form-item label="SEO描述信息">
          <el-input v-model="SiteSet.seoDesc"/>
        </el-form-item>
        <el-form-item label="课程内容版权方">
          <el-input v-model="SiteSet.courseContentCopyrightParty"/>
          <p>您可以填写网站名称或公司名称</p>
        </el-form-item>
        <el-form-item label="ICP备案号">
          <el-input v-model="SiteSet.icpRecordNumber"/>
        </el-form-item>
        <section>
          <span>网站统计分析代码部署</span>
        </section>
        <el-form-item label="统计分析代码">
          <el-input :rows="6" v-model="SiteSet.statisticalAnalysisCode" type="textarea"/>
          <div style="width:50%">
            <p>统计代码是网站统计软件发布的一段代码，用以统计添加统计代码的网站的数据</p>
            <p>包括网站的访客来源，从哪个网页跳转到此网站，搜索什么关键词到网站，一共有多少人访问，每天多少人多少IP，平均访问时间是多少等等数据。</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  import {addSiteSetData, getSiteSetData} from '@/api/system/site_set';
  import {upLoadFile} from '@/api/upLoadFile'; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    data() {
      return {
        SiteSet: {
          name: '',
          title: '',
          logo: '',
          logoUrl: '',
          icon: '',
          iconUrl: '',
          domainName: '',
          ip: '',
          seoKeyWords: '',
          seoDesc: '',
          courseContentCopyrightParty: '',
          icpRecordNumber: '',
          statisticalAnalysisCode: ''
        },
        logofile: '',
        iconfile: ''
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        getSiteSetData(getTenantId()).then(response => {
          this.SiteSet = response.data;
        }).catch(err => {
          console.log(err);
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.SiteSet.tenantId = getTenantId();
            addSiteSetData(this.SiteSet).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      handleLogoChange(file) {
        this.logofile = file.raw
      },
      handleIconChange(file) {
        this.iconfile = file.raw
      },
      uploadLogoFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.logofile.name)
        fileForm.append('uid', this.logofile.uid)
        fileForm.append('file', this.logofile)
        upLoadFile(fileForm).then(response => {
          this.SiteSet.logo = response.data.id
          this.SiteSet.logoUrl = response.data.url
        })
      },
      uploadIconFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.iconfile.name)
        fileForm.append('uid', this.iconfile.uid)
        fileForm.append('file', this.iconfile)
        upLoadFile(fileForm).then(response => {
          this.SiteSet.icon = response.data.id
          this.SiteSet.iconUrl = response.data.url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .basic {
    .submmit {
      width: 100%;
      height: 44px;
      line-height: 70px;
      background-color: #e6eaee;
      padding-right: 30px;
      padding-top: 6px;
    }

    .main {
      .el-form {
        margin-top: 20px;

        .el-input {
          width: 50%;
        }

        .el-textarea {
          width: 50%;
        }

        p {
          margin: 0;
          color: #606266;
        }

        section {
          display: block;
          width: 100%;
          height: 40px;
          line-height: 40px;
          background-color: #f0f3ff;
          margin-top: 20px;
          padding-left: 20px;
          margin-bottom: 20px;
          color: #606266;
        }
      }
    }
  }
</style>
